<template>
  <div class="list-detail-wrap">
    <div class="list">
      <el-row class="item">
        <div class="title">用户ID</div>
        <div class="desc">{{ info.userid }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">用户名</div>
        <div class="desc">{{ info.username }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">余额</div>
        <div class="desc">{{ info.balance }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">年卡</div>
        <div class="desc">{{ info.cansendcount }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">企业认证</div>
        <div class="desc">{{ info.entisauth === 1? '未认证' : '已认证' }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">个人认证</div>
        <div class="desc">{{ info.ideisauth === 1? '未认证' : '已认证' }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">粉丝数</div>
        <div class="desc">{{ info.fans }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">已使用年卡</div>
        <div class="desc">{{ info.havesendcount }}</div>
      </el-row>
      <el-row v-show="info.headurl !== 'null'" class="item">
        <div class="title">头像</div>
        <div class="desc">
          <img :src="`${baseUrl}/common/viewImage?imagepath=${info.headurl}`" :preview="0" preview-text="" alt="" class="images">
        </div>
      </el-row>
      <el-row class="item">
        <div class="title">是否是代理商</div>
        <div class="desc">{{ info.isagency === 0? '否' : '是' }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">电话</div>
        <div class="desc">{{ info.phone }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">推荐人ID</div>
        <div class="desc">{{ info.recommendid }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">推荐人电话</div>
        <div class="desc">{{ info.recommendphone }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">注册时间</div>
        <div class="desc">{{ info.registdate }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">换完年卡剩余粉丝个数</div>
        <div class="desc">{{ info.remainder }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">服务费</div>
        <div class="desc">{{ info.servicefee }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">状态</div>
        <div class="desc">{{ info.state === 1 ? '正常' : '禁用' }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">消费金额</div>
        <div class="desc">{{ info.totalcost }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">收入金额</div>
        <div class="desc">{{ info.totalrevenue }}</div>
      </el-row>
      <el-row class="item">
        <div class="title">会员等级</div>
        <div class="desc">{{ info.userlevel === 1? '普通会员':info.userlevel === 2 ? '服务商':'区域服务商' }}</div>
      </el-row>
    </div>
  </div>
</template>

<script>
import base from '@/api/base'
export default {
  name: 'ListDetail',
  data() {
    return {
      baseUrl: base.pro
    }
  },
  computed: {
    info() {
      console.log(JSON.parse(this.$route.query.props))
      return JSON.parse(this.$route.query.props)
    }
  }
}
</script>
<style lang="scss" scoped>
.list-detail-wrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  z-index: 20;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  .list {
    width: 100%;
    border: 1px solid #dcdfe6;
    border-bottom: none;
    box-sizing: border-box;
    .item {
      width: 100%;
      border-bottom: 1px solid #dcdfe6;
      box-sizing: border-box;
      display: flex;
      background-color: #e6effb;
      .title {
        width: 30%;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border-right: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #757575;
      }
      .desc {
        width: 70%;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #757575;
        [class="images"] {
          position: relative;
          vertical-align: middle;
          width: 80px;
          height: 80px;
          z-index: 20;
        }
      }
    }
  }
}
</style>
